<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
        <script src="../../../../libs/layui/layui.js"></script>
        <link rel="stylesheet" href="../../../../libs/layui/css/layui.css" />
        <title>Layui - 数据表格 (v2.6.8)</title>
    </head>
    <body style="padding: 15px; background-color: #f2f2f2">
        <table id="demo" lay-filter="test"></table>

        <script type="text/javascript">
            layui.use('table', function () {
                var table = layui.table;

                //第一个实例
                table.render({
                    elem: '#demo',
                    height: 312,
                    url: '../mock/table.json', //数据接口
                    page: true, //开启分页
                    cols: [
                        [
                            //表头
                            { field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left' },
                            { field: 'username', title: '用户名', width: 80 },
                            { field: 'sex', title: '性别', width: 80, sort: true },
                            { field: 'city', title: '城市', width: 80 },
                            { field: 'sign', title: '签名' },
                            { field: 'experience', title: '积分', width: 80, sort: true },
                            { field: 'score', title: '评分', width: 80, sort: true },
                            { field: 'classify', title: '职业', width: 80 },
                            { field: 'wealth', title: '财富', width: 135, sort: true },
                        ],
                    ],
                });
            });
        </script>
    </body>
</html>
